<template>
  <div class="main-container">
    <!-- 轮播图 -->
    <full-page :options="options" id="fullpage" ref="fullpage" class="hidden-md-and-down">
      <Banner class="section" />
      <!-- 品牌荣誉 -->
      <Brand style="background-color:#3d0064;" class="section" />

      <Products style="background-color:#223c64;" class="section" />
      <SignUp style="background-color:#81a837;" class="section" />
      <News style="background-color:#6e0225;" class="section" />
      <Spirit style="background-color:#007455;" class="section" />
      <Footer style="background-color:#000000 " class="section footer" />
    </full-page>

  </div>
</template>

<script>
import './css.css'
// components
//common


//content
import Banner from '@/components/content/banner/Banner.vue'//轮播图

//views 
import Brand from '@/views/home/main/Brand.vue' //品牌荣誉
import Products from '@/views/home/main/Products.vue'
import SignUp from '@/views/home/main/SignUp.vue'
import News from '@/views/home/main/News.vue'
import Spirit from '@/views/home/main/Spirit.vue'
import Footer from '@/components/common/footer/Footer.vue'

export default {
  components: {
    Banner,
    Brand,
    Products,
    SignUp,
    News,
    Spirit,
    Footer
  },
  data () {
    return {
      currentScroll: null,
      options: {
        scrollBar: false,
        // anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'],
        // scrollOverflow: true,
        afterLoad: this.afterLoad,
        // licenseKey: null
      },
      index: 1,
      headState: false,
      color: '#007455'
    }
  },
  methods: {
    handleScroll () {
      this.currentScroll = window.pageYOffset
      console.log(this.currentScroll)

    },
    afterLoad (m, idx) {
      console.log(m)
      if (idx.index != 0) {
        this.headState = true
        this.color = '#000'
      } else {
        this.headState = false
        this.color = '#007455'
      }
      console.log(this.headState)
      console.log(this.color)
      this.$store.commit('navBg', this.headState)
      this.$store.commit('Color', this.color)
      console.log(this.$store.state.headState)
    }
  },
  mounted () {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  updated () {
    this.handleScroll()
  }
}
</script>

<style lang='less' scoped>
</style>